<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-form :model="issueQuery" ref="issueQuery" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item label="issue 编号" prop="id" label-width="120px">
          <el-input
            v-model="issueQuery.id"
            placeholder="issue 十九位编号"
            clearable
            size="small"
            style="width: 240px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="标题" prop="title">
          <el-input
            v-model="issueQuery.title"
            placeholder="标题"
            clearable
            size="small"
            style="width: 240px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select
            v-model="issueQuery.status"
            placeholder="issue状态"
            clearable
            size="small"
            style="width: 120px"
          >
            <el-option
              v-for="dict in statusOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="类型">
          <el-select v-model="issueQuery.type"  placeholder="选择类型" style="width: 120px">
            <el-option
              v-for="item in typeOptions"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
              :disabled="checkOnly"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="优先级">
          <el-select v-model="issueQuery.sort"  placeholder="选择等级" style="width: 120px">
            <el-option
              v-for="item in sortOptions"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
              :disabled="checkOnly"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
            v-hasPermi="['bmService:issues:add']"

          >新增</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="success"
            plain
            icon="el-icon-edit"
            size="mini"
            :disabled="single"
            @click="handleUpdate"
            v-hasPermi="['bmService:issues:update']"
          >修改</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="danger"
            plain
            icon="el-icon-delete"
            size="mini"
            :disabled="multiple"
            @click="handleDelete"
            v-hasPermi="['bmService:issues:remove']"
          >删除</el-button>
        </el-col>
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getIssueList" :columns="columns"></right-toolbar>
      </el-row>
    </el-row>


    <!-- 添加或修改参数配置对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="900px" append-to-body >
      <el-form ref="form" :model="issueVo" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="24">
            <strong style="padding-left: 40px;line-height: 20px;"> issue ID </strong> <span>{{issueVo.id}}</span>
          </el-col>

        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="标题" prop="title" >
              <el-input v-model="issueVo.title" placeholder="请输入反馈标题" maxlength="200" v-if="!checkOnly"/>
              <span v-else>{{issueVo.title}}</span>
            </el-form-item>

          </el-col>

        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="内容" prop="content">
              <editor v-model="issueVo.content" :min-height="192" v-if="!checkOnly"/>
              <div id="showContent" v-html="issueVo.content" v-else style="margin: 0 auto"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="状态">
              <el-select v-model="issueVo.status"  placeholder="推进状态">
                <el-option
                  v-for="item in statusOptions"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                  :disabled="checkOnly"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="类型">
              <el-select v-model="issueVo.type"  placeholder="选择类型">
                <el-option
                  v-for="item in typeOptions"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                  :disabled="checkOnly"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="优先级">
              <el-select v-model="issueVo.sort"  placeholder="选择等级" default-first-option>
                <el-option
                  v-for="item in sortOptions"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                  :disabled="checkOnly"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="giteeIssue 受理地址" prop="giteeIssuesUrl" label-width="180px">
              <el-input v-model="issueVo.giteeIssuesUrl" placeholder="gitee 受理地址" v-if="!checkOnly"/>
              <a v-else :href="issueVo.giteeIssuesUrl || 'javascript:void(0)'">{{issueVo.giteeIssuesUrl || '暂无'}}</a>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <strong style="padding-left: 40px;line-height: 20px;"> 创建时间</strong> <span>{{issueVo.bmCreate | dateFormat}}</span>
          </el-col>
          <el-col :span="12">
            <strong style="padding-left: 40px;line-height: 20px;"> 上次修改</strong> <span>{{issueVo.bmModified | dateFormat}}</span>
          </el-col>
        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>



    <el-table v-loading="loading" :data="issueList" @selection-change="handleSelectionChange" style="max-width: 1400px">
      <el-table-column type="selection" width="50" align="center"/>
      <el-table-column label="id" align="center" key="id" prop="id" v-if="columns[0].visible"/>
      <el-table-column label="标题" align="center" key="title" prop="title" v-if="columns[1].visible"/>
      <el-table-column label="内容" align="center" key="content" prop="content" v-if="columns[2].visible"/>
      <el-table-column label="优先级" align="center" key="sort" prop="sort" v-if="columns[7].visible">
        <template slot-scope="scope">
          <!--          <span>{{ scope.row.sort > 1 ? scope.row.sort > 2 ? '紧急': '重要' : '待办'}}</span>-->
          <span>{{parseOptions(scope.row.sort,sortOptions)}}</span>
        </template>
      </el-table-column>
      <el-table-column label="发起者id" align="center" key="userid" prop="userid" v-if="columns[4].visible"/>
      <el-table-column label="类型" align="center" key="type" prop="type" v-if="columns[5].visible">
        <template slot-scope="scope">
<!--          <span>{{ scope.row.type > 0 ? '建议' : 'bug'}}</span>-->
          <span>{{parseOptions(scope.row.type,typeOptions)}}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" key="status" prop="status" v-if="columns[3].visible">
        <template slot-scope="scope">
          <!--          <span>{{ scope.row.status > 1 ? scope.row.status > 2 ? '已完成' : '已忽略' : scope.row.status > 0 ? '已受理' : '未查看'}}</span>-->
          <span>{{parseOptions(scope.row.status,statusOptions)}}</span>
        </template>
      </el-table-column>
      <el-table-column label="gitee受理地址" align="center" key="giteeIssuesUrl" prop="giteeIssuesUrl" v-if="(columns[6].visible)">
        <template slot-scope="scope">
          <span>{{ scope.row.giteeIssuesUrl || '未受理'}}</span>
        </template>
      </el-table-column>

      <el-table-column label="创建时间" align="center" key="bmCreate" prop="bmCreate"  v-if="columns[8].visible">
        <template slot-scope="scope">
          <span>{{ scope.row.bmCreate | dateFormat }}</span>
        </template>
      </el-table-column>
      <el-table-column label="最近修改" align="center" key="bmModified" prop="bmModified"  v-if="columns[9].visible">
        <template slot-scope="scope">
          <span>{{ scope.row.bmModified | dateFormat}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="160"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope" v-if="scope.row.userId !== 1">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleCheck(scope.row)"
          >查看</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['bmService:issues:update']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['bmService:issues:remove']"
          >删除</el-button>
        </template>
      </el-table-column>

    </el-table>

    <!-- 分页 -->
    <el-pagination
      style="text-align: center"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPageNumber"
      :page-sizes="[10, 20, 50, 200]"
      :page-size="100"
      layout="sizes, prev, pager, next"
      :total="rowTotal">
    </el-pagination>
  </div>
</template>

<script>
import issues from "@/api/bmService/issues";
import {addUser, delUser, getUser, updateUser} from "@/api/system/user";
export default {
  name: "issues",
  data(){
    return{
      loading: true,// 遮罩层
      ids: [],// 选中的id
      single: true,// 非单个禁用
      multiple: true,// 非多个禁用
      currentPageNumber:1,
      pageLimit:10,
      rowTotal:0,
      title:'', // 弹窗标题
      open:false, //是否弹窗
      showSearch:true,


      checkOnly:false,// 仅查看
      issueVo:{
        id:undefined,            //反馈issuesID
        title:'',         //标题[<200]
        content:'',       //内容[<21845]
        status:undefined,         //0 无/1 已受理/2 已忽略/3 已完成
        //userid:'',        //发起人ID
        type:undefined,           //0 bug/1 建议
        giteeIssuesUrl:'',//gitee 受理地址
        sort:undefined,           //排序 | 3 2 1| 紧急 重要 待办

      }, // issue 实体属性
      rules: {// 表单校验
      },

      sortOptions:[
        { dictValue:2,dictLabel:'紧急 🚨'},
        { dictValue:1,dictLabel:'重要 🧭'},
        { dictValue:0,dictLabel:'待办 ⛱'},
      ],
      typeOptions:[
        { dictValue:0,dictLabel:'bug 🐛'},
        { dictValue:1,dictLabel:'建议 🛠'},
      ],
      statusOptions:[
        { dictValue:0,dictLabel:'未查看 🙄'},
        { dictValue:1,dictLabel:'已受理 ⚡'},
        { dictValue:2,dictLabel:'已忽略 ⌨'},
        { dictValue:3,dictLabel:'已完成 ✅'},
      ],


      issueList:[], // 反馈表单列表
      issueQuery:{
        id:undefined,            //反馈issuesID
        title:undefined,         //标题[<200]
        content:undefined,       //内容[<21845]
        status:undefined,         //0 无/1 已受理/2 已忽略/3 已完成
        userid:undefined,        //发起人ID
        type:undefined,           //0 bug/1 建议
        giteeIssuesUrl:undefined,//gitee 受理地址
        sort:undefined,           //排序 | 3 2 1| 紧急 重要 待办
        begin:undefined,         // 查询开始时间
        end:undefined            // 查询结束时间
      },
      columns: [
        { key: 0, label: `id`, visible: false },
        { key: 1, label: `标题`, visible: true },
        { key: 2, label: `内容`, visible: false },
        { key: 3, label: `状态`, visible: true },
        { key: 4, label: `发起者id`, visible: false },
        { key: 5, label: `类型`, visible: true },
        { key: 6, label: `gitee受理地址`, visible: true },
        { key: 7, label: `优先级`, visible: true },
        { key: 8, label: `创建时间`, visible: true },
        { key: 9, label: `最近修改`, visible: false }
      ],

    }
  },
  created() {
    this.getIssueList()
  },
  methods:{

    getIssueList(){
      this.loading = true
      issues.getList(this.issueQuery,this.currentPageNumber,this.pageLimit)
        .then(response => {
          this.issueList = response.data.issuesList
          this.rowTotal = response.data.total
          this.loading = false
        })
    },
    parseOptions(value,options){
      let option = options.filter((val)=>{
        return val.dictValue == value
      })
      return option[0].dictLabel
    },


   reset(){
      this.checkOnly = false
      this.title = ''
      this.issueVo = {
                         id:undefined,            //反馈issuesID
                           title:'',         //标题[<200]
                           content:'',       //内容[<21845]
                           status:0,         //0 无/1 已受理/2 已忽略/3 已完成
                           userid:'',        //发起人ID
                           type:0,           //0 bug/1 建议
                           giteeIssuesUrl:'',//gitee 受理地址
                           sort:0,           //排序 | 3 2 1| 紧急 重要 待办

                       }
   },

    cancel() {
      this.open = false;
      this.reset();
    },
    resetQuery(){
      this.issueQuery = {}
      this.handleQuery()
    },
    handleQuery() {/** 搜索按钮操作 */
      this.currentPageNumber = 1
      this.getIssueList();
    },
    submitForm: function() {/** 提交按钮 */
      if (this.issueVo.id !== undefined) {
        issues.update(this.issueVo).then(response => {
          this.msgSuccess("修改成功");
          this.open = false;
          this.getIssueList();
        });
      } else {
        issues.addIssues(this.issueVo).then(response => {
          this.msgSuccess("新增成功");
          this.open = false;
          this.getIssueList();
        });
      }
    },
    handleCheck(row){
      this.reset();
      const issueId = row.id || this.ids;
      issues.getOne(issueId).then(response => {
        this.issueVo = response.data;
        this.open = true;
        this.checkOnly = true
        this.title = "查看反馈详情";
      });
    },
    handleAdd() { /** 新增按钮操作 */
      this.reset();
      this.title = "添加反馈"
      this.open = true
    },
    handleUpdate(row) {/** 修改按钮操作 */
      this.reset();
      const issueId = row.id || this.ids;
      issues.getOne(issueId).then(response => {
        this.issueVo = response.data;
        this.open = true;
        this.title = "修改反馈";
      });
    },
    handleDelete(row) { // 按下删除按钮
      const issueIds = row.id || this.ids
      this.$confirm('是否确认删除编号为"' + issueIds + '"的数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function() {
        return issues.removeIssues(issueIds)
      }).then(() => {
        this.getIssueList();
        this.msgSuccess("删除成功");
      }).catch(() => {});
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    handleSizeChange(val) {
      this.pageLimit = val
      this.getIssueList()
    },
    handleCurrentChange(val) {
      this.currentPageNumber = val
      this.getIssueList()
    }
  }
}
</script>

<style>
#showContent img{
  max-width: 100%;
  transition: linear 120ms;
}
#showContent img:active{
  position: fixed;
  top: 50%;
  left: 50%;
  height: 100vh;
  max-height: 100vh;
  z-index: 1;
  transform: translate(-50%,-50%);
}

</style>
